<template>
  <div>
    <elCascader
      ref="cascader"
      :options="cascaderData"
      :value="multiValue"
      :props="configProps"
      :placeholder="placeholder"
      :size="size"
      :filterable="filterable"
      :collapseTags="collapseTags"
      @change="onChange"
      @remove-tag="removeTag"
      v-bind="{ ...$props }"
    ></elCascader>
  </div>
</template>
<script>
import { Cascader as elCascader } from "element-ui";
export default {
  name: "Cascader",
  // render (h) {
  //   let Cascader = (
  //     <el-cascader ref="cascader" value={this.multiValue} options={this.cascaderData} props={{props:this.configProps}} clearable={this.clearable}
  //     placeholder={this.placeholder} size={this.size} filterable={this.filterable} collapse-tags={this.collapseTags}
  //     on-change={this.onChange} on-remove-tag={this.removeTag}></el-cascader>
  //   )
  //   return Cascader
  // },
  components: {
    elCascader,
  },
  props: {
    placeholder: {
      type: String,
    },
    value: {
      type: Array,
    },
    cascaderData: {
      type: Array,
    },
    configProps: {
      type: Object,
      default: () => {
        return {
          multiple: true,
          expandTrigger: "hover",
          emitPath: false,
        };
      },
    },
    size: {
      type: String,
      default: "small",
    },
    collapseTags: {
      type: Boolean,
      default: true,
    },
    filterable: {
      type: Boolean,
      default: true,
    },
    clearable: {
      type: Boolean,
      default: true,
    },
  },
  watch: {
    value: {
      handler(newData, oldData) {
        this.multiValue = newData;
      },
      deep: true,
      immediate: true,
    },
  },
  data() {
    return {
      multiValue: [],
    };
  },
  methods: {
    removeTag(val) {
      this.$emit("removeTag", val);
    },
    onChange(val) {
      this.$emit("change", val);
    },
  },
};
</script>
